<template>
	<view>
		<view class="zfb-tk-main">
			<view :key="index" v-for="(item, index) in list">
				<view class="zfb-tk-item zfb-tk-msgleft">
					<image class="zfb-tk-avatar" :src="item.portrait" mode="aspectFill"></image>
					<view class="zfb-tk-item-contentx">
						<view class="zfb-msg-nickname">
							{{item.nickName}}
							<text style="margin-left: 50rpx;">{{fmtTime(item.create_time)}}</text>
						</view>
						<view class="zfb-tk-item-contentx-c">
							<view class="zfb-tk-item-contentx-c-tool">
								<!-- 文本 -->
								<view class="zfb-tk-item-c" v-if="item.msgType == 'TEXT'">
									<block :key="index" v-for="(textitem, index) in textChuli(item.content)">
										<text space="nbsp" v-if="textitem.type == 'text'">{{textitem.text}}</text>
										<text space="nbsp" v-if="textitem.type == 'url'" style="color:#4D6B8B;" @click="goToUrl(textitem.text)">{{textitem.text}}</text>
									</block>
								</view>
								<!-- 位置 -->
								<view class="zfb-tk-item-c-LOCATION" v-if="item.msgType == 'LOCATION'" @click="goMap(returnParse(item.content))">	
									<view class="zfb-tk-item-c-LOCATION-name">{{ returnParse(item.content).name }}</view>
									<view class="zfb-tk-item-c-LOCATION-address">{{ returnParse(item.content).address }}</view>	
									<image class="zfb-tk-item-c-LOCATION-map" src="../../static/wx/map.png" mode="aspectFit"></image>
								</view>
								<!-- 图片 -->
								<image class="zfb-tk-item-c-img" v-if="item.msgType == 'IMAGE'" :src="getimgurl(returnParse(item.content).url)" mode="aspectFill" @click="lookimg(returnParse(item.content).url)"></image>
								<!-- 语音 -->
								<view v-if="item.msgType == 'VOICE'" class="zfb-tk-item-c-VOICE">
									<view class="zfb-tk-item-c-VOICE-msg">
										<view class="zfb-tk-item-c" :style="{width:contentMicWidth('语音消息暂时不支持播放'),padding: '30rpx 20rpx'}">
											<image class="content-icon" :src="play_mic_id==returnParse(item.content).url?'/static/img/chat/play-left.gif':'/static/img/chat/default-left.png'"  ></image>
											<text style="margin-left:20rpx; font-size: 12px;color: #999;">语音消息暂时不支持播放</text>
										</view>
									</view>
								</view>
								<!-- 附件 -->
				                <view class="zfb-tk-item-c-CARD" v-if="item.msgType == 'FILE'" @click="lookFile(returnParse(item.content))">
									<view class="zfb-tk-item-c-CARD-top">
										<view class="zfb-tk-item-c-CARD-top-content">
											<view class="zfb-tk-item-c-CARD-title">{{returnParse(item.content).name}}</view>
											<view class="zfb-tk-item-c-CARD-no">{{format_size(returnParse(item.content).size)}}</view>
										</view>
										<image class="zfb-tk-item-c-CARD-top-img" :src="getFileType(returnParse(item.content))" mode=""></image>
									</view>
								</view>
								<!-- 视频 -->
								<view class="zfb-tk-item-c-video" v-if="item.msgType == 'VIDEO'" @click="openVideo(returnParse(item.content).videoUrl)">
									<image class="zfb-tk-item-c-img" :src="returnParse(item.content).url" mode="aspectFill"></image>
									<view class="zfb-tk-item-c-video-icon">
										<text class="wxfont bofang"></text>
									</view>
								</view>
								<!-- 名片 -->
								<view class="zfb-tk-item-c-CARD" v-if="item.msgType == 'CARD'" @click="goAddfriend(returnParse(item.content))">
									<view class="zfb-tk-item-c-CARD-top">
										<image class="zfb-tk-item-c-CARD-top-img" :src="returnParse(item.content).avatar" mode=""></image>
										<view class="zfb-tk-item-c-CARD-top-content">
											<view class="zfb-tk-item-c-CARD-title">{{returnParse(item.content).name}}</view>
											<view class="zfb-tk-item-c-CARD-no">{{returnParse(item.content).chatNo}}</view>
										</view>
									</view>
									<view class="zfb-tk-item-c-CARD-card">推荐名片</view>
								</view>
								<!-- 聊天记录 -->
								<view class="zfb-tk-item-c-CARD" v-if="item.msgType == 'manyMsg'" @click="lookManyMsg(item)">
									<view class="zfb-tk-item-c-CARD-top">
										<view class="zfb-tk-item-c-CARD-top-content">
											<view class="zfb-tk-item-c-CARD-title">{{returnParse(item.content).msgTitle}}的聊天记录</view>
											<view style="height: 10rpx;"></view>
											<view :key="index" v-for="(msgson, index) in returnParse(item.content).msgDesc" class="zfb-tk-item-c-CARD-no">{{msgson.nickname}}:{{msgson.content}}</view>
										</view>
									</view>
									<view class="zfb-tk-item-c-CARD-card">聊天记录</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="clear: both;"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		timestampFormat,datetime_to_unix
	} from '../../common/time.js';
	var app = getApp();
	export default {
		data() {
			return {
				msgId: '',
				msgInfo: '',
				windowType: '',
				list: [],
				play_mic_id: ''
			};
		},
		onLoad(e) {
			if(e.msgId && e.msgId != 'undefined'){
				this.msgId = e.msgId;
			}
			if(e.msgInfo){
				this.msgInfo = JSON.parse(e.msgInfo);
			}
			this.windowType = e.windowType;
			if(this.msgId || this.msgInfo){
				this.getInfo();
			}
		},
		methods: {
			getInfo(){
				uni.showLoading('加载中...');
				this.$http.request({
					url: '/chat/get_manymsginfo/?msgId=' + this.msgId + '&msgInfo=' + JSON.stringify(this.msgInfo) + '&windowType=' + this.windowType,
					success: res => {
						if (res.data.code == 200) {
							var data = res.data.data;
							this.list = data.list;
							uni.setNavigationBarTitle({
								title: data.title
							});
						}
					}
				});
			},
			fmtTime(time) {
				time = time * 1;
				return timestampFormat(time);
			},
			format_size(size){
				size = size * 1;
			    return this.$fc.sizeFilter(size);
			},
			getFileType(item) {
			    var type = item.ext ? item.ext : 'other';
				return this.$fc.getFileType(type);
			},
			checkshowtime(pre_time){
			    if(this.item.msgType=='ALERT')return false;
			    if(!pre_time)return true;
			    if(!this.item.time)return false;
			    var endtime = datetime_to_unix(pre_time);
			    var statime = datetime_to_unix(this.item.time);
			    return statime-endtime>=300?true:false;
			},
			contentMicWidth(e) {
			    if(e>30)e=30;
				return 130 + e * 8 + 'rpx';
			},
			sendVoiceCall(){
				//发起语音
				uni.showLoading({
					title:'发起语音通话'
				})
				var formdata={
					userId: this.talkTo.userId, 
					msgType: "TRTC_VOICE_START", 
					content: "TRTC_VOICE_START" 
				}
				this.$http.request({
					url: '/chat/sendMsg',
					method: 'POST',
					data: JSON.stringify(formdata),
					success: (res) => {
						if(res.data.code=='200'){
							if(res.data.data.status!=='0'){
								uni.showToast({
									title:res.data.data.statusLabel,
									icon:'none'
								})
								return
							}
							var userInfo=res.data.data.userInfo
							var data={
								userId:userInfo.userId,
								trtcId:userInfo.trtcId,
								nickName:userInfo.nickName,
								portrait:userInfo.portrait,
								startTime:new Date().getTime(),
								type:'audio'
							}
							uni.setStorage({
								key: 'call',
								data: JSON.stringify(data),
								success: function () {
									TUICalling.call({
									    userID: userInfo.trtcId,
									    type: 1
									})
								}
							});
							
						}
					}
				});
			},
			sendVideoCall(){
				//发起视频
				uni.showLoading({
					title:'发起视频通话'
				})
				var formdata={
					userId: this.talkTo.userId, 
					msgType: "TRTC_VIDEO_START", 
					content: "TRTC_VIDEO_START" 
				}
				this.$http.request({
					url: '/chat/sendMsg',
					method: 'POST',
					data: JSON.stringify(formdata),
					success: (res) => {
						if(res.data.code=='200'){
							if(res.data.data.status!=='0'){
								uni.showToast({
									title:res.data.data.statusLabel,
									icon:'none'
								})
								return
							}
							var userInfo=res.data.data.userInfo
							var data={
								userId:userInfo.userId,
								trtcId:userInfo.trtcId,
								nickName:userInfo.nickName,
								portrait:userInfo.portrait,
								startTime:new Date().getTime(),
								type:'video'
							}
							uni.setStorage({
								key: 'call',
								data: JSON.stringify(data),
								success: function () {
									TUICalling.call({
									    userID: userInfo.trtcId,
									    type: 2
									})
								}
							});
						}
					}
				});
			},
			goAddfriend(e){
				uni.navigateTo({
					url:'../personInfo/detail?param='+e.userId+'&source=2'
				})
			},
			textChuli(content) {
				return this.$fc.textGetUrl({content:content});
			},
			goToUrl(url){
				return this.$fc.goWebUrl({url:url});
			},
			openVideo(e){
				return this.$fc.openVideo(e);
			},
			lookFile(e){
				this.$fc.plusDownload({onlinePath:e.url}).then(res=>{
					this.$fc.plusOpenFile({filePath:res})
				})
			},
			playVOICE(url){
				if(this.paused && this.play_mic_id==url){
					this.innerAudioContext.destroy()
					this.paused=!this.paused
					return;
				}
			    this.changeMicId(url);
				this.innerAudioContext = uni.createInnerAudioContext();
				// var url='https://www.w3school.com.cn/i/horse.ogg'
				this.innerAudioContext.sessionCategory='soloAmbient'
				this.innerAudioContext.src = url;
				this.innerAudioContext.play()
				
				this.innerAudioContext.onPlay(() => {
					this.paused=true
				})
				this.innerAudioContext.onPause(() => {
			        this.changeMicId('0');
					this.paused=false
					this.innerAudioContext.destroy()
				})
				this.innerAudioContext.onEnded(() => {
			        this.changeMicId('0');
				});
			},
			goMap(e) {
				uni.openLocation({
					name: e.name,
					address: e.address,
					latitude: e.latitude * 1,
					longitude: e.longitude * 1,
					success: function() {}
				});
			},
			returnParse(txt) {
			    if(typeof txt=='object'){
			      return txt;
			    }else{
			      if(!this.returnParseData[txt]){
			          this.returnParseData[txt]=JSON.parse(txt);
			      }
			      return this.returnParseData[txt];
			    }
			},
			changeMicId(e){
			    this.$emit('MicId',e);
			},
			tryagin(e, i) {
				this.$emit('tryagin', e, i);
			},
			getimgurl(url){
			    if(url && url.substr(0,4)=='http'){
			        var w = 155,h=225;
			        var upload_type=app.globalData.appconfig?app.globalData.appconfig.upload_type:'local';
			        if(upload_type=='qiniuoss')url+='?imageView2/1/w/'+w+'/h/'+h+'/q/100';
			        if(upload_type=='alioss')url+='?x-oss-process=image/resize,,m_fill,h_'+h+',w_'+w;
			    }
			    return url;
			},
			lookimg(url){
				var list = this.list;
				var imgObj = [];
				var imgkey = 0;
				var current = 0;
				for(var i = 0; i < list.length; i++){
					if(list[i]['msgType'] == 'IMAGE'){
						var list_imgurl = this.returnParse(list[i]['content']).url;
						imgObj.push(list_imgurl);
						if(list_imgurl == url){
							current = imgkey;
						}
						imgkey++;
					}
				}
				this.$fc.previewImages(imgObj,current);
			},
			lookManyMsg(item){
				if(item.content.msgList){
					var msgInfo = JSON.stringify(item.content);
					var msgId = '';
				}else{
					var msgInfo = '';
					var msgId = item.content.msgId;
				}
				uni.navigateTo({
					url: this.$fc.get_package_name()+'favorites/manymsg?msgId=' + msgId + '&msgInfo=' + msgInfo + '&windowType=' + item.content.windowType
				})
			},
			gochatOne(e) {
				var source=e.windowType=="GROUP" ? '7' : '3'
				uni.navigateTo({
					url:'../personInfo/detail?param='+e.personId+'&source='+source
				})
			},
			longpressItem(e,i,v) {//长按回调
				this.$emit('longpressItem',e,i,v)
				if(this.itemKey==this.longTapItemKey){
					this.$refs['toolx'+this.itemKey].showTab();
				}
			},
		},
	};
</script>
<style>
	page{
		background: #ededed;
	}
</style>
<style lang="scss" scoped>
	.zfb-tk-main {
		padding: 10px 12px;
	}
	$avatarsize: 80rpx;
	$border-radius: 12rpx;
	$textcolor: #000;
	$descolor: #000;
	$leftbgcolor: #ffffff;
	$rightbgcolor: #95EC69;
	
	.zfb-tk-item {
		position: relative;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		margin: 5px 0;
	}
	
	.zfb-tk-item .zfb-tk-item-c text {
		word-break: break-all;
	}
	.zfb-msg-nickname{
		height:40rpx; 
		line-height: 40rpx; 
		font-size: 24rpx;
		color: #999999;
	}
	.zfb-tk-msgleft,
	.zfb-tk-msgright {
		text-align: left;
	}
	
	.zfb-tk-msgleft {
		float: left;
		display: flex;
		flex-direction: row;
	}
	
	.zfb-tk-item .zfb-tk-item-c::after {
		position: absolute;
		content: '';
		width: 14rpx;
		height: 14rpx;
		top: 34rpx;
		transform: rotate(45deg);
	}
	
	.zfb-tk-msgleft .zfb-tk-item-c::after {
		background: $leftbgcolor;
		left: -7rpx;
	}
	
	.zfb-tk-msgright .zfb-tk-item-c::after {
		background: $rightbgcolor;
		right: -7rpx;
	}
	
	.zfb-tk-avatar {
		min-width: $avatarsize;
		width: $avatarsize;
		height: $avatarsize;
		border-radius: $border-radius;
	}
	
	.zfb-tk-msgleft .zfb-tk-avatar {
		margin-right: 12rpx;
	}
	
	.zfb-tk-msgright .zfb-tk-avatar {
		margin-left: 12rpx;
	}
	
	.zfb-tk-msgright {
		float: right;
		display: flex;
		flex-direction: row-reverse;
	}
	
	.zfb-tk-msgcenter {
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		float: left;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #999;
	}
	
	.zfb-tk-item-c {
		box-sizing: border-box;
		position: relative;
		display: inline-block;
		border-radius: $border-radius;
	}
	
	.zfb-tk-msgleft .zfb-tk-item-c,
	.zfb-tk-msgright .zfb-tk-item-c {
		min-height: $avatarsize;
		background: $leftbgcolor;
		color: $textcolor;
		padding: 10px;
	}
	
	.zfb-tk-msgright .zfb-tk-item-c {
		background: $rightbgcolor;
	    justify-content: flex-end; 
	}
	
	.zfb-tk-username {
		color: $descolor;
	}
	
	.zfb-tk-time {
		font-size: 28rpx;
		text-align: center;
		color: #999;
		width: 100%;
		box-sizing: border-box;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.zfb-tk-msgright .zfb-tk-time {
		text-align: right;
	}
	
	.zfb-tk-msgleft .zfb-tk-time {
		text-align: left;
	}
	.zfb-tk-time-notsend {
		font-size: 64rpx;
		color: #fa5151;
		margin-top: 8rpx;
	}
	.zfb-tk-item-c-LOCATION {
		background: #ffffff;
		border: 1px #f6f6f6 solid;
		display: flex;
		flex-direction: column;
		width: 445rpx;
		border-radius: 12rpx;
		padding: 24rpx;
	}
	.zfb-tk-item-c-LOCATION-name {
		font-size: 32rpx;
		color: #000000;
		// font-weight: bold;
	}
	.zfb-tk-item-c-LOCATION-address {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
	}
	.zfb-tk-item-c-LOCATION-map {
		background-color: #e5ffff;
		overflow: hidden;
		width: 445rpx;
		height: 150rpx;
	}
	.zfb-tk-item-c-img{
		border: 1px #eee solid;
		max-width: 310rpx;
		max-height: 450rpx;
	}
	.zfb-tk-item-c-video{
		position: relative;
	}
	.zfb-tk-item-c-video-icon{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		display: flex;flex-direction: row;justify-content: center;align-items: center;
	}
	.zfb-tk-item-c-video-icon text{
		font-size: 100rpx;
		color: #dddddd;
		text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	}
	
	.btn_icon{
		position: absolute;
		left: 0;
		top: 50%;height:100rpx;width:84rpx;
		margin-top: -30rpx;
	}
	.zfb-tk-item-c-VOICE{}
	.vmove{
		animation: scalev 1s linear infinite;
		transform: scale(1);
	}
	@keyframes scalev {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.3);
		}
		100% {
			transform: scale(1);
		}
	}
	.zfb-tk-item-c-VOICE-tras{
		display: flex;flex-direction: row;align-items: center;
	}
	.zfb-tk-item-c-VOICE-tras text{
		padding:6rpx 12rpx;
		font-size: 24rpx;
		background-color: #eee;
		border-radius: 12rpx;
		color: #bcbcbc;
		margin:0 12rpx;
	}
	.zfb-tk-item-c-VOICE-tras-icon{
		margin: 6rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fa5151;
		position: relative;
	}
	.zfb-tk-item-c-VOICE-tras-text{
		width: 100%;
		font-size: 26rpx;
		color: #666;
		word-break: break-all;
		margin-bottom: 12rpx;
	}
	.zfb-tk-msgright .zfb-tk-item-c-VOICE-tras-text{
		text-align: right;
	}
	.zfb-tk-msgleft .zfb-tk-item-c-VOICE-tras-text{
		text-align: left;
	}
	.zfb-tk-msgleft .zfb-tk-item-c-VOICE-msg{
		flex-direction: row-reverse;
	}
	.zfb-tk-msgleft .zfb-tk-item-c-VOICE-tras{
		flex-direction: row-reverse;
	}
	.zfb-tk-item-c-VOICE-msg .zfb-tk-item-c{
		display: flex;flex-direction: row;align-items: center;
	}
	.zfb-tk-item-c-VOICE-msg{
		display: flex;flex-direction: row;align-items: center;
	}
	/*名片*/
	.zfb-tk-item-c-CARD{
		width: 440rpx;
		box-sizing: border-box;
		border: 1px #f6f6f6 solid;
		padding: 24rpx;
		border-radius: 12rpx;
		background: #ffffff;
	}
	.zfb-tk-item-c-CARD-top{
		display: flex;flex-direction: row;align-items: center;
	}
	.zfb-tk-item-c-CARD-top-img{
		width: 80rpx;
		min-width: 80rpx;
		height: 80rpx;
		margin-left: 24rpx;
		border-radius: 6rpx;
	}
	.zfb-tk-item-c-CARD-top-content{
		overflow: hidden;
		display: flex;flex-direction: column;
	}
	.zfb-tk-item-c-CARD-title{
		color: #070707;
		font-size: 32rpx;
	}
	.zfb-tk-item-c-CARD-no{
		font-size: 24rpx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.zfb-tk-item-c-CARD-card{
		font-size: 24rpx;
		color: #666;
		margin-top: 24rpx;
	}
	/*附件*/
	.zfb-tk-item-c-FILE{
		width: 400rpx;
		box-sizing: border-box;
		border: 1px #f6f6f6 solid;
		padding: 24rpx;
		border-radius: 12rpx;
	}
	.zfb-tk-item-c-FILE-top{
		display: flex;flex-direction: row;align-items: center;
	}
	.zfb-tk-item-c-FILE-top-img{
		width: 80rpx;
		min-width: 80rpx;
		height: 80rpx;
		margin-right: 24rpx;
		border-radius: 6rpx;
	}
	.zfb-tk-item-c-FILE-top-content{
		overflow: hidden;
		display: flex;flex-direction: column;
	}
	.zfb-tk-item-c-FILE-title{
		color: #070707;
		font-size: 32rpx;
	}
	.zfb-tk-item-c-FILE-no{
		font-size: 24rpx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.zfb-tk-item-c-FILE-card{
		font-size: 24rpx;
		color: #666;
		margin-top: 24rpx;
	}
	
	.zfb-tk-item-contentx{
		position: relative;
		display: flex;
		flex-direction: column;
		max-width: 544rpx;
	}
	.zfb-tk-item-contentx-name{
		color: #7C7C7E;
		font-size: 24rpx;
	}
	.zfb-tk-msgright .zfb-tk-item-contentx{
		align-items: flex-end;
	}
	.zfb-tk-msgleft .zfb-tk-item-contentx{
		align-items: flex-start;
	}
	.zfb-tk-item-contentx-c{
		display: flex;
		align-items: center;
		
	}
	.zfb-tk-msgleft .zfb-tk-item-contentx-c{
		flex-direction: row-reverse;
	}
	.zfb-tk-msgright .zfb-tk-item-contentx-c{
		flex-direction: row;
	}
	.zfb-tk-TRTC{
		align-items: center;
		display: flex;flex-direction: row;
	}
	.zfb-tk-TRTC .wxfont{
		font-size: 42rpx;
	}
	.zfb-tk-item-contentx-c-tool{display: flex;flex-direction: column;}
	.zfb-tk-msgleft .zfb-tk-item-contentx-c-tool{
		align-items: flex-start;
	}
	.zfb-tk-msgright .zfb-tk-item-contentx-c-tool{
		align-items: flex-end;
	}
	.content-icon{
	    width:50rpx;
	    height:50rpx;
	}
	.abso_checkbox{
		float: left;
		position: absolute; 
		top: 50%;
		margin-top: -15px;
	}
	.abso_posicheckbox{
		float: left;
		width: 30px;
		height: 30px;
	}
</style>